<template>
  <!-- 选择套餐规格弹窗 -->
  <Dialog
    ref="skuFormDialogRef"
    :title="title"
    v-model="skuFormVisible"
    width="900px"
    class="sku-dialog"
  >
    <div class="sku-container">
      <!-- 套餐规格选择 -->
      <div class="sku-section">
        <div class="section-header">
          <div class="header-icon">
            <Icon icon="ep:box" />
          </div>
          <div class="header-content">
            <h3 class="section-title">选择套餐规格</h3>
            <p class="section-subtitle">请选择适合您的套餐配置</p>
          </div>
        </div>

        <div class="sku-grid">
          <!-- 固定规格套餐 -->
          <div
            v-for="(item, index) in skuDataList"
            :key="index + 'sku'"
            @click="selectSku(item)"
            class="sku-card"
            :class="{ 'sku-active': orderConfirmParams.skuId == item.id }"
          >
            <div class="sku-header">
              <div class="sku-badge fixed-badge">
                <Icon icon="ep:star-filled" />
                <span>推荐</span>
              </div>
              <div class="sku-quantity">
                <span class="quantity-number">{{ item.num }}</span>
                <span class="quantity-unit">{{ productUnit }}</span>
              </div>
            </div>

            <div class="sku-body">
              <div class="sku-validity">
                <Icon icon="ep:clock" class="validity-icon" />
                <span>{{ item.expireTime == 0 ? '永久有效' : item.expireTime + '天有效期' }}</span>
              </div>

              <div class="sku-divider"></div>

              <div class="sku-pricing">
                <div class="original-price">
                  <span class="price-label">原价</span>
                  <span class="price-value">¥{{ item.oldPrice }}</span>
                </div>
                <div class="current-price">
                  <span class="price-label">现价</span>
                  <span class="price-value">¥{{ item.price }}</span>
                </div>
              </div>
            </div>

            <div class="sku-footer">
              <div class="select-indicator">
                <Icon icon="ep:check" />
              </div>
            </div>
          </div>

          <!-- 自定义数量套餐 -->
          <div
            v-for="(item, index) in filterSkUDataList"
            :key="index + 'custom'"
            @click="selectSku(item)"
            class="sku-card custom-card"
            :class="{ 'sku-active': orderConfirmParams.skuId == item.id }"
          >
            <div class="sku-header">
              <div class="sku-badge custom-badge">
                <Icon icon="ep:edit" />
                <span>自定义</span>
              </div>
              <div class="sku-quantity custom-quantity">
                <Icon icon="ep:setting" class="custom-icon" />
                <span class="custom-text">自定义数量</span>
              </div>
            </div>

            <div class="sku-body">
              <div class="sku-validity">
                <Icon icon="ep:clock" class="validity-icon" />
                <span>{{ item.expireTime == 0 ? '永久有效' : item.expireTime + '天有效期' }}</span>
              </div>

              <div class="sku-divider"></div>

              <div class="sku-pricing">
                <div class="unit-price">
                  <span class="price-label">单价</span>
                  <span class="price-value">¥{{ item.price }}</span>
                </div>
              </div>
            </div>

            <div class="sku-footer">
              <div class="select-indicator">
                <Icon icon="ep:check" />
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 配置选项 -->
      <div class="config-section">
        <div class="section-header">
          <div class="header-icon">
            <Icon icon="ep:setting" />
          </div>
          <div class="header-content">
            <h3 class="section-title">配置选项</h3>
            <p class="section-subtitle">完善订单相关信息</p>
          </div>
        </div>

        <div class="config-form">
          <el-form label-width="100px" class="enhanced-form">
            <!-- 指定员工 -->
            <el-form-item
              label="指定员工"
              required
              v-if="productType == 1 && !specUser"
              class="staff-form-item"
            >
              <div class="staff-selection">
                <div v-if="userNameList.length" class="selected-staff">
                  <div class="staff-list">
                    <div v-for="user in userNameList" :key="user.id" class="staff-tag">
                      <Icon icon="ep:user" class="staff-icon" />
                      <span>{{ user.username }}</span>
                    </div>
                  </div>
                </div>
                <div v-else class="no-staff">
                  <Icon icon="ep:user-filled" class="no-staff-icon" />
                  <span>暂未选择员工</span>
                </div>
                <el-button
                  type="primary"
                  :icon="Plus"
                  @click="staffVisible = true"
                  class="add-staff-btn"
                >
                  {{ userNameList.length ? '修改员工' : '选择员工' }}
                </el-button>
              </div>
            </el-form-item>

            <!-- 自定义数量 -->
            <el-form-item
              label="购买数量"
              required
              v-if="selectedSku && selectedSku.type == 2"
              class="quantity-form-item"
            >
              <div class="quantity-input-wrapper">
                <el-input-number
                  v-model="orderConfirmParams.num"
                  :min="1"
                  :max="9999"
                  placeholder="请输入购买数量"
                  class="quantity-input"
                />
                <span class="quantity-unit-text">{{ productUnit }}</span>
              </div>
            </el-form-item>

            <!-- 收货信息 -->
            <template v-if="orderConfirmParams.deliveryType == 2">
              <div class="delivery-section">
                <div class="delivery-header">
                  <Icon icon="ep:truck" class="delivery-icon" />
                  <span class="delivery-title">收货信息</span>
                </div>

                <div class="delivery-form">
                  <el-form-item label="收件人" required class="delivery-form-item">
                    <el-input
                      v-model.trim="orderConfirmParams.receiver"
                      placeholder="请输入收件人姓名"
                      class="delivery-input"
                    >
                      <template #prefix>
                        <Icon icon="ep:user" />
                      </template>
                    </el-input>
                  </el-form-item>

                  <el-form-item label="联系方式" required class="delivery-form-item">
                    <el-input
                      v-model.trim="orderConfirmParams.mobile"
                      placeholder="请输入手机号码"
                      class="delivery-input"
                    >
                      <template #prefix>
                        <Icon icon="ep:phone" />
                      </template>
                    </el-input>
                  </el-form-item>

                  <el-form-item label="收货地址" required class="delivery-form-item">
                    <el-cascader
                      v-model="orderConfirmParams.areaId"
                      :options="areaList"
                      :props="defaultProps"
                      clearable
                      filterable
                      placeholder="请选择省市区"
                      class="address-cascader"
                    />
                  </el-form-item>

                  <el-form-item label="详细地址" required class="delivery-form-item">
                    <el-input
                      v-model.trim="orderConfirmParams.detailAddress"
                      type="textarea"
                      :rows="3"
                      placeholder="请输入详细地址"
                      class="address-textarea"
                    />
                  </el-form-item>
                </div>
              </div>
            </template>
          </el-form>
        </div>
      </div>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <div class="order-summary">
          <div class="summary-item">
            <span class="summary-label">订单金额：</span>
            <span class="summary-amount">¥{{ orderAmount }}</span>
          </div>
        </div>
        <div class="footer-actions">
          <el-button @click="skuFormVisible = false" class="cancel-btn"> 取消 </el-button>
          <el-button
            :loading="confirmLoading"
            type="primary"
            @click="onConfirmOrder"
            :disabled="!orderConfirmParams.skuId"
            class="confirm-btn"
          >
            <Icon icon="ep:check" class="btn-icon" />
            {{ confirmLoading ? '创建中...' : '确认订单' }}
          </el-button>
        </div>
      </div>
    </template>

    <!-- 员工选择弹窗 -->
    <Dialog
      ref="staffRef"
      title="选择指定员工"
      v-model="staffVisible"
      width="800px"
      class="staff-dialog"
    >
      <div class="staff-container">
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="dept-section">
              <div class="dept-header">
                <Icon icon="ep:office-building" class="dept-icon" />
                <span class="dept-title">部门结构</span>
              </div>
              <DeptTree
                @node-click="handleDeptNodeClick"
                ref="deptThree"
                :show-checkbox="true"
                @current-change="currentChange"
                class="dept-tree"
              />
            </div>
          </el-col>
          <el-col :span="16">
            <div class="user-section">
              <div class="user-header">
                <Icon icon="ep:user" class="user-icon" />
                <span class="user-title">员工列表</span>
              </div>
              <el-table
                v-loading="loading"
                :data="list"
                ref="multipleTable"
                @selection-change="handleSelectionChange"
                :row-key="rowKey"
                class="user-table"
              >
                <el-table-column type="selection" width="55" :reserve-selection="true" />
                <el-table-column label="用户编号" align="center" prop="id" width="100" />
                <el-table-column
                  label="用户昵称"
                  align="center"
                  prop="nickname"
                  :show-overflow-tooltip="true"
                />
              </el-table>
            </div>
          </el-col>
        </el-row>
      </div>

      <template #footer>
        <div class="staff-footer">
          <el-button @click="cancaleStaff" class="cancel-btn"> 取消 </el-button>
          <el-button type="primary" @click="onConfirmStaff" class="confirm-btn">
            <Icon icon="ep:check" class="btn-icon" />
            确定选择
          </el-button>
        </div>
      </template>
    </Dialog>
  </Dialog>
</template>

<script setup lang="ts">
// @ts-ignore
import * as PayApi from '@/api/system/pay'
import { getProductSkuList, getProductSkuListByCode } from '@/api/system/productsku'
import { getProduct, getProductByCode } from '@/api/system/product'
import { defaultProps } from '@/utils/tree'
import * as UserApi from '@/api/system/user'
import DeptTree from '@/views/system/user/DeptTree.vue'
import { Plus } from '@element-plus/icons-vue'
import * as AreaApi from '@/api/system/area'

defineOptions({ name: 'SkuFormDialog' })

// 响应式数据
const loading = ref(true)
const deptThree = ref(null)
const list = ref([])
const queryParams = reactive({
  pageNo: 1,
  pageSize: 50,
  deptId: ''
})
const staffVisible = ref(false)
const multipleTable = ref(null)
const rowKey = (row) => row.id

// 获取用户列表
const getList = async () => {
  loading.value = true
  try {
    const data = await UserApi.getUserPage(queryParams)
    list.value = data.list
  } finally {
    loading.value = false
  }
}

// 订单金额计算
const orderAmount = computed(() => {
  let count = userNameList.value.length || 1
  if (orderConfirmParams.skuId) {
    if (selectedSku.value.type == 1) {
      return selectedSku.value.price * count
    } else {
      return ((orderConfirmParams.num * (selectedSku.value.price * 100)) / 100) * count
    }
  } else {
    return 0
  }
})

// 部门节点点击
const handleDeptNodeClick = async (row) => {
  queryParams.deptId = row.id
  await getList()
}

// 树形选择变化
const currentChange = (checkNodes, value) => {
  const checkedKeysArr = value.checkedKeys
  if (checkedKeysArr.length) {
    list.value.forEach((row) => {
      if (checkedKeysArr.indexOf(row.deptId) != -1) {
        multipleTable.value.toggleRowSelection(row, true)
      } else {
        multipleTable.value.toggleRowSelection(row, false)
      }
    })
  } else {
    multipleTable.value.clearSelection()
  }
}

const userNameList = ref([])

// 表格选择变化
const handleSelectionChange = (row) => {
  let deptIdArr = row.map((item) => item.deptId)
  deptThree.value.setCheckedKeys(deptIdArr)
  userNameList.value = row
}

const onConfirmStaff = () => {
  staffVisible.value = false
}

const cancaleStaff = () => {
  staffVisible.value = false
}

// 产品类型
const productType = ref(null)
const selectedSku = ref(null)
const skuFormVisible = ref(false)
const skuDataList = ref([])
const filterSkUDataList = ref([])

// 订单确认参数
const orderConfirmParams = reactive({
  skuId: null,
  num: 0,
  userIdList: [],
  areaId: '',
  detailAddress: '',
  receiver: '',
  mobile: '',
  deliveryType: 1
})

const confirmLoading = ref(false)
const skuFormDialogRef = ref()
const title = ref('')
const productUnit = ref('')
const areaList = ref('')
const specUser = ref(false)

// 打开弹窗
const open = async (type: number, productCode?: object, productId?: object, userIdList) => {
  skuFormVisible.value = true
  productType.value = type
  skuDataList.value = []
  filterSkUDataList.value = []
  let list = null
  productId = productId || null
  productCode = productCode || null
  let productInfo = null

  if (productId != null) {
    productInfo = await getProduct(productId)
    list = await getProductSkuList(productId)
  }
  if (productCode) {
    productInfo = await getProductByCode(productCode)
    list = await getProductSkuListByCode(productCode)
  }

  if (productInfo) {
    productUnit.value = productInfo.unit
    orderConfirmParams.deliveryType = productInfo.deliveryType
    title.value = `正在购买${productInfo.name}，请选择套餐规格`

    if (orderConfirmParams.deliveryType == 2) {
      areaList.value = await AreaApi.getAreaTree()
    }
  }

  for (let i = 0; i < list.length; i++) {
    if (list[i].type == 1) {
      skuDataList.value.push(list[i])
    } else if (list[i].type == 2) {
      filterSkUDataList.value.push(list[i])
    }
  }

  orderConfirmParams.userIdList = []
  if (userIdList) {
    specUser.value = true
    orderConfirmParams.userIdList = userIdList
  }

  // 重置表单
  orderConfirmParams.skuId = null
  orderConfirmParams.num = 0
  orderConfirmParams.receiver = ''
  orderConfirmParams.mobile = ''
  orderConfirmParams.areaId = ''
  orderConfirmParams.detailAddress = ''
  userNameList.value = []

  getList()
}

defineExpose({ open })

// 选择SKU
const selectSku = (sku) => {
  selectedSku.value = sku
  orderConfirmParams.skuId = sku.id
}

const { push } = useRouter()

// 确认订单
const onConfirmOrder = async () => {
  if (!specUser.value && orderConfirmParams.userIdList.length == 0) {
    if (productType.value == 1 && userNameList.value.length == 0) {
      ElMessage.error('请选择员工')
      return
    }
  }

  if (orderConfirmParams.deliveryType == 2) {
    if (!orderConfirmParams.receiver) {
      ElMessage.error('请输入收件人')
      return
    }
    if (!orderConfirmParams.mobile) {
      ElMessage.error('请输入联系方式')
      return
    }
    const reg = /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/
    if (!reg.test(orderConfirmParams.mobile)) {
      ElMessage.error('请输入正确的联系方式')
      return
    }
    if (!orderConfirmParams.areaId) {
      ElMessage.error('请选择收货地址')
      return
    }
    if (!orderConfirmParams.detailAddress) {
      ElMessage.error('请输入详细地址')
      return
    }
  }

  if (productType.value == 1) {
    if (!specUser.value || orderConfirmParams.userIdList.length == 0) {
      orderConfirmParams.userIdList = userNameList.value.map((item) => item.id)
    }
  }

  confirmLoading.value = true
  try {
    ElMessage.success('订单正在创建')
    const data = await PayApi.confirmOrder({ ...orderConfirmParams })
    push('/pay/balance?preOrderNo=' + data.preOrderNo)
  } catch (error) {
    console.error('创建订单失败:', error)
    ElMessage.error('创建订单失败，请重试')
  } finally {
    confirmLoading.value = false
  }
}
</script>

<style lang="scss" scoped>
/* 弹窗样式 */
.sku-dialog,
.staff-dialog {
  :deep(.el-dialog) {
    border-radius: 16px;
    overflow: hidden;
  }

  :deep(.el-dialog__header) {
    background: linear-gradient(135deg, #0052cc 0%, #1d4ed8 100%);
    color: white;
    padding: 20px 24px;
  }

  :deep(.el-dialog__title) {
    color: white;
    font-weight: 600;
    font-size: 18px;
  }

  :deep(.el-dialog__headerbtn .el-dialog__close) {
    color: white;
    font-size: 18px;
  }

  :deep(.el-dialog__body) {
    padding: 24px;
  }
}

/* 主容器 */
.sku-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* 区块头部 */
.section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 2px solid rgba(0, 82, 204, 0.1);
  position: relative;

  &::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, #0052cc 0%, #1d4ed8 100%);
    border-radius: 1px;
  }
}

.header-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #0052cc 0%, #1d4ed8 100%);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 16px;
}

.header-content {
  flex: 1;
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 4px 0;
}

.section-subtitle {
  font-size: 13px;
  color: #6b7280;
  margin: 0;
}

/* SKU网格 */
.sku-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

/* SKU卡片 */
.sku-card {
  background: white;
  border: 2px solid #e5e7eb;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;

  &:hover {
    border-color: #0052cc;
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 82, 204, 0.15);
  }

  &.sku-active {
    border-color: #0052cc;
    background: linear-gradient(135deg, rgba(0, 82, 204, 0.02) 0%, rgba(0, 82, 204, 0.01) 100%);
    box-shadow: 0 8px 25px rgba(0, 82, 204, 0.2);

    .select-indicator {
      opacity: 1;
      transform: scale(1);
    }

    .sku-badge {
      background: linear-gradient(135deg, #0052cc 0%, #1d4ed8 100%);
      color: white;
    }
  }
}

.custom-card {
  border-style: dashed;

  &:hover {
    border-color: #10b981;
  }

  &.sku-active {
    border-color: #10b981;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.02) 0%, rgba(16, 185, 129, 0.01) 100%);
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.2);

    .sku-badge {
      background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    }
  }
}

/* SKU卡片头部 */
.sku-header {
  padding: 16px 16px 12px;
  position: relative;
}

.sku-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(0, 82, 204, 0.1);
  color: #0052cc;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s ease;
}

.fixed-badge {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
}

.custom-badge {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

.sku-quantity {
  text-align: center;
  margin-top: 8px;
}

.quantity-number {
  font-size: 28px;
  font-weight: 700;
  color: #0052cc;
  display: block;
  line-height: 1;
}

.quantity-unit {
  font-size: 14px;
  color: #6b7280;
  font-weight: 500;
}

.custom-quantity {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  background: rgba(16, 185, 129, 0.05);
  border-radius: 8px;
  margin-top: 8px;
}

.custom-icon {
  color: #10b981;
  font-size: 20px;
}

.custom-text {
  font-size: 16px;
  font-weight: 600;
  color: #10b981;
}

/* SKU卡片主体 */
.sku-body {
  padding: 0 16px 12px;
}

.sku-validity {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
  color: #6b7280;
  margin-bottom: 12px;
}

.validity-icon {
  color: #f59e0b;
}

.sku-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(0, 82, 204, 0.2) 50%, transparent 100%);
  margin: 12px 0;
}

.sku-pricing {
  text-align: center;
}

.original-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.original-price .price-label {
  font-size: 12px;
  color: #9ca3af;
}

.original-price .price-value {
  font-size: 13px;
  color: #9ca3af;
  text-decoration: line-through;
}

.current-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.current-price .price-label {
  font-size: 13px;
  color: #6b7280;
  font-weight: 500;
}

.current-price .price-value {
  font-size: 18px;
  font-weight: 700;
  color: #ef4444;
}

.unit-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.unit-price .price-label {
  font-size: 13px;
  color: #6b7280;
  font-weight: 500;
}

.unit-price .price-value {
  font-size: 18px;
  font-weight: 700;
  color: #10b981;
}

/* SKU卡片底部 */
.sku-footer {
  position: relative;
  height: 0;
}

.select-indicator {
  position: absolute;
  top: -40px;
  right: 12px;
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 12px;
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.2s ease;
  border: 2px solid white;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

/* 配置表单 */
.config-form {
  background: rgba(0, 82, 204, 0.02);
  border-radius: 12px;
  padding: 20px;
  border: 1px solid rgba(0, 82, 204, 0.1);
}

.enhanced-form {
  :deep(.el-form-item__label) {
    font-weight: 500;
    color: #374151;
  }
}

/* 员工选择 */
.staff-form-item {
  .staff-selection {
    width: 100%;
  }

  .selected-staff {
    margin-bottom: 16px;
  }

  .staff-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
  }

  .staff-tag {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: linear-gradient(135deg, #0052cc 0%, #1d4ed8 100%);
    color: white;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 500;
  }

  .staff-icon {
    font-size: 12px;
  }

  .no-staff {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(156, 163, 175, 0.1);
    border-radius: 8px;
    color: #9ca3af;
    margin-bottom: 12px;
  }

  .no-staff-icon {
    font-size: 16px;
  }

  .add-staff-btn {
    background: linear-gradient(135deg, #0052cc 0%, #1d4ed8 100%);
    border: none;
    border-radius: 8px;
  }
}

/* 数量输入 */
.quantity-form-item {
  .quantity-input-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .quantity-input {
    flex: 1;
  }

  .quantity-unit-text {
    font-size: 14px;
    color: #6b7280;
    font-weight: 500;
  }
}

/* 发货信息 */
.delivery-section {
  background: rgba(16, 185, 129, 0.02);
  border-radius: 12px;
  padding: 20px;
  border: 1px solid rgba(16, 185, 129, 0.1);
  margin-top: 16px;
}

.delivery-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(16, 185, 129, 0.2);
}

.delivery-icon {
  color: #10b981;
  font-size: 18px;
}

.delivery-title {
  font-size: 16px;
  font-weight: 600;
  color: #059669;
}

.delivery-form {
  display: grid;
  gap: 16px;
}

.delivery-form-item {
  margin-bottom: 0;
}

.delivery-input,
.address-cascader,
.address-textarea {
  width: 100%;

  :deep(.el-input__wrapper) {
    border-radius: 8px;
  }
}

/* 弹窗底部 */
.dialog-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  background: rgba(0, 82, 204, 0.02);
  border-top: 1px solid rgba(0, 82, 204, 0.1);
}

.order-summary {
  display: flex;
  align-items: center;
  gap: 16px;
}

.summary-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.summary-label {
  font-size: 16px;
  color: #6b7280;
  font-weight: 500;
}

.summary-amount {
  font-size: 20px;
  font-weight: 700;
  color: #ef4444;
}

.footer-actions {
  display: flex;
  gap: 12px;
}

.cancel-btn {
  border: 2px solid #e5e7eb;
  color: #6b7280;
  border-radius: 8px;
  padding: 10px 24px;
}

.confirm-btn {
  background: linear-gradient(135deg, #0052cc 0%, #1d4ed8 100%);
  border: none;
  border-radius: 8px;
  padding: 10px 24px;

  .btn-icon {
    margin-right: 6px;
  }
}

/* 员工选择弹窗 */
.staff-container {
  min-height: 400px;
}

.dept-section,
.user-section {
  background: rgba(0, 82, 204, 0.02);
  border-radius: 12px;
  padding: 16px;
  border: 1px solid rgba(0, 82, 204, 0.1);
  height: 400px;
}

.dept-header,
.user-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0, 82, 204, 0.2);
}

.dept-icon,
.user-icon {
  color: #0052cc;
  font-size: 16px;
}

.dept-title,
.user-title {
  font-size: 14px;
  font-weight: 600;
  color: #0052cc;
}

.dept-tree {
  height: calc(100% - 40px);
  overflow-y: auto;
}

.user-table {
  height: calc(100% - 40px);

  :deep(.el-table__body-wrapper) {
    max-height: 320px;
    overflow-y: auto;
  }
}

.staff-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .sku-dialog,
  .staff-dialog {
    :deep(.el-dialog) {
      width: 95% !important;
      margin: 20px auto;
    }
  }

  .sku-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .dialog-footer {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }

  .footer-actions {
    width: 100%;
    justify-content: space-between;
  }

  .staff-container {
    .el-row {
      flex-direction: column;
    }

    .el-col {
      width: 100% !important;
      margin-bottom: 16px;
    }
  }
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
  .sku-card {
    background: #374151;
    border-color: rgba(255, 255, 255, 0.1);
  }

  .section-title {
    color: #f9fafb;
  }

  .section-subtitle {
    color: #d1d5db;
  }

  .config-form,
  .delivery-section,
  .dept-section,
  .user-section {
    background: rgba(30, 41, 59, 0.5);
    border-color: rgba(255, 255, 255, 0.1);
  }
}
</style>
